<template>
  <div class="play_server">
    <div class="server_box">
      <h3>更多</h3>
      <ul>
        <li v-for="(item, index) in list" :key="index" @click="itemClick(index)">
          <img :src="item.icon" alt="">
          <span>{{item.title}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {icon: require('../../../assets/img/my/ic_name.png'),title: '实名认证'},
        {icon: require('../../../assets/img/my/ic_personal.png'),title: '个人资料'},
        {icon: require('../../../assets/img/my/ic_wd.png'),title: '稳定版APP'},
      ]
    }
  }, 
  methods: {
    itemClick(index) {
      switch(index) {
        case 0:
          this.$router.push('/user_idcard_add')
          break;
        case 1:
          this.$router.push('/userinfo/setup')
          break;
        case 2:
          this.$toast('下载稳定版APP')
      }
    }
  },
}
</script>

<style lang="less" scoped>
.play_server {
  width: 9.146667rem;
  height: 3.426667rem;
  padding: 0 .426667rem;
  margin-top: .266667rem;
  margin-bottom: .933333rem;
  font-size: .32rem;
  color: #333;
  .server_box {
    width: 9.146667rem;
    height: 3.426667rem;
    background: #fff;
    border-radius: .266667rem;
    h3 {
      font-size: .48rem;
      padding: .533333rem 0 0 .266667rem;
      color: #222;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 2.286667rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: .666667rem;
        img {
          width: .733333rem;
          height: .733333rem;
        }
        span {
          padding-top: .2rem;
        }
      }
    }
  }
}
</style>